<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<uni-fab :content="fab_content" :pattern="fab_pattern" @trigger="trigger"></uni-fab>
		
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabBars" :key="index" class="nav-item" :class="{current: index === tabCurrentIndex}"
			 :id="'tab'+index" :data-type="item.type" :data-index="index" @tap="changeTabs($event,index)">{{item}}</view>
		</scroll-view>
		<swiper id="swiper" class="paid_swiper" :duration="300" :current="tabCurrentIndex"
		 @change="changeTab">
			<swiper-item v-for="(item,index) in tabBars" :key="index">
				<scroll-view class="panel-scroll-box" :scroll-y="enableScroll">
					<view class="content">
						<view>
							<div class='tip_box' v-if="news_list && news_list[0]" v-for="(item,index) in news_list">
								<div @tap="choose_url(item.news_id)" class='tip_box1'>
									<div class="tip_title">{{item.title}}</div>
									<div class="tip_time">{{item.add_time}}</div>
								</div>
							</div>
							<div class='tip_box_no_data' v-if="no_data && (!news_list || !news_list[0])">
								<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
								<div class='no_tip_content'>
									<lang keywords="抱歉，暂无公告信息~"></lang>
								</div>
							</div>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniList from '../component/uni-list/uni-list.vue'
	import uniListItem from '../component/uni-list-item/uni-list-item.vue'
	import uniFab from '../component/uni-fab/uni-fab.vue';
	import uniSegmentedControl from "../../../appComponent/uni/uni-segmented-control/uni-segmented-control.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	var _this;
	export default {
		data() {
			return {
				// items: ['小区公告', '小区新闻', '小区动态','小区活动'],
				items: [],
				current: 0,
				user_options: {},
				cat_id: 0,
				pageIndex: 1,
				category_list: [],
				news_list: [],
				fab_content: [],
				fab_pattern: {},
				village_name: '',
				village_id: 0,
				pigcms_id: 0,
				village_logo: '',
				no_data: false,
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				oldpaylist:[],
			}
		},
		components: {
			uniSegmentedControl,
			uniList,
			uniListItem,
			uniFab
		},
		methods: {
			choose_url(id) {
				uni.navigateTo({
					url: '/pages/village/index/villagecontent?news_id=' + id,
				});
			},
			// onClickItem(index) {
			// 	if (_this.current !== index) {
			// 		_this.current = index;
			// 		if (_this.category_list[index] && _this.category_list[index]['cat_id']) {
			// 			_this.cat_id = _this.category_list[index]['cat_id'];
			// 			_this.getVillageNewslist()
			// 		}
			// 	}
			// },
			getVillageNewslist(cat_id, pageIndex) {
				// 获取公告消息
				if (!cat_id) {
					cat_id = _this.cat_id;
				}
				if (!pageIndex) {
					pageIndex = _this.pageIndex;
				}
				common.post('HouseApi&a=village_newslist', {
					village_id: _this.village_id,
					pigcms_id: _this.pigcms_id,
					cat_id: cat_id,
					page: pageIndex
				}, data => {
					if (data.category_list && data.category_list[0]) {
						_this.category_list = data.category_list;
						var cat_rr = [];
						for (var i in data.category_list) {
							if (data.category_list[i] && data.category_list[i]['cat_name']) {
								cat_rr.push(data.category_list[i]['cat_name'])
							}
						}
						_this.tabBars = cat_rr;
						var cat_index = [];
						for (var i in data.category_list) {
							if (data.category_list[i] && data.category_list[i]['cat_id']) {
								cat_index.push(data.category_list[i]['cat_id'])
							}
						}
						if(_this.cat_id){
							_this.tabCurrentIndex = cat_index.indexOf(_this.cat_id)
						}
						
						console.log("33333333333",_this.tabCurrentIndex)
						_this.no_data = false;
					} else {
						_this.no_data = true;
					}
					if (data.news_list && data.news_list[0]) {
						_this.news_list = data.news_list;
						_this.no_data = false;
					} else {
						_this.news_list = [];
						_this.no_data = true;
					}
				});
			},
			trigger(param) {
				var url = param.item.pagePath;
				if (_this.village_id) {
					url = common.changeURLArg(url, 'village_id', _this.village_id);
				}
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}
				console.log('tabbar url', url);
				common.parseUrl(url, '', false, param.item.text);
			},
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			async changeTabs(e) {
				var index = e.currentTarget.dataset.index
				
				//getoldpayMentlist()
				if (_this.tabCurrentIndex !== index) {
					_this.tabCurrentIndex = index;
					if (_this.category_list[index] && _this.category_list[index]['cat_id']) {
						_this.cat_id = _this.category_list[index]['cat_id'];
						_this.getVillageNewslist()
					}
				}
				// this.tabCurrentIndex = index;
			},
			async changeTab(e) {
				_this.news_list = []
				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
			
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						if (_this.tabCurrentIndex !== index) {
							_this.tabCurrentIndex = index;
							if (_this.category_list[index] && _this.category_list[index]['cat_id']) {
								_this.cat_id = _this.category_list[index]['cat_id'];
								_this.getVillageNewslist()
							}
						}
						console.log(e)
					}
					_this.type = _this.tabBars[index].type
					// getoldpayMentlist()
					
					// this.tabCurrentIndex = index;
			
				}, 300)
			
			},
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					console.log("2222", el)
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
						console.log("1111111", res(data))
					}).exec();
				});
			},
			loadTabbars() {
				// this.loadNewsList('add');
				getpayMenthead()
				let tabList = _this.tabBars
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
				})
				_this.tabBars = tabList;
				// this.loadNewsList('add');
			},
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad: function(options) {
			_this = this;
			_this.cat_id = options.cat_id;
			common.setMainColor(_this, function(config) {
				_this.fab_pattern = {
					buttonColor: app.globalData.config.config.mobile_head_color
				}
				if (app.globalData.tabBar && app.globalData.tabBar.list) {
					_this.fab_content = app.globalData.tabBar.list;
				}

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.village_name = res.village_name;
					_this.pigcms_id = res.pigcms_id;
					_this.village_logo = res.village_logo;
				}

				if (options.village_id) {
					common.post('HouseApi&a=search_village', {
						village_id: options.village_id
					}, data => {
						_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
						_this.village_id = options.village_id;
						_this.village_name = data.village_name;

						var res = {
							village_id: _this.village_id,
							village_name: _this.village_name,
							village_logo: _this.village_logo
						};
						if (options.pigcms_id) {
							res.pigcms_id = options.pigcms_id;
							_this.pigcms_id = options.pigcms_id;
						}
						uni.setStorageSync('village_key', res);
						_this.getVillageNewslist();
					});
				} else {
					_this.getVillageNewslist();
				}
			});
		}
	}
</script>

<style>
	.container {
		background-color: #f4f4f4 !important;
	}

	.uni-list-cell__content-title {
		font-size: 24rpx !important;
		width: 60% !important;
	}

	.tip_box {
		background-color: #FFFFFF;
		padding: 32rpx;
		font-size: 24rpx;
		height: 32rpx;
		border-bottom: 1px solid #F5F5F5;
	}

	.tip_box1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.tip_box .tip_title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tip_time {
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.tip_box_no_data {
		padding-top: calc((100vh - 80rpx - 288rpx - 80rpx -21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}

	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	
	/* .no_data_img{
		width:374rpx;
		height:288rpx;
	} */
	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90rpx;
		white-space: nowrap;
	}
	
	.nav-bar .nav-item {
		display: inline-block;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #303133;
		position: relative;
		padding:0 30rpx;
	}
	/* .nav-bar .nav-item:first-child{
		padding-left:40rpx;
	}
	.nav-bar .nav-item:last-child{
		padding-right:40rpx;
	} */
	
	.nav-item:after {
		content: '';
		width: 0;
		height: 0;
		border-bottom: 4upx solid #007aff;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		transition: 0.3s;
	}
	
	.nav-bar .current {
		color: #007aff;
	}
	
	.nav-bar .current::after {
		width: 50%;
	}
	
	
	
	/* .swiper-box {
		height: 1000rpx;
	} */
	
	.gopay_view{
		height: calc(100vh - 80rpx - 100rpx);
	}
	
	.paid_swiper {
		height: calc(100vh - 170rpx);
	}
	.panel-scroll-box {
		height: calc(100vh - 170rpx);
	}
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
	
	
	.swiper-box .panel-scroll-box .panel-item {
		background: #fff;
		padding: 30px 0;
		border-bottom: 2px solid #000;
	}
	
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
</style>
